<template>
  <div class="home">
    <el-header>
      <div class="institution">{{gOrgName}}</div>
      <div class="set-wrap">
        <img src="@/assets/img/logout.svg" alt="" @click="logout">
        <!-- <img src="@/assets/img/set.svg" alt="" @click="updatePwd"> -->
        <el-tooltip class="name" effect="dark" placement="bottom">
          <div slot="content">
            <p class="tips">{{ gName }}</p>
            <p class="tips">{{ roleName[gRoleName] }}</p>
          </div>
          <el-button>管</el-button>
        </el-tooltip>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <div class="logo">
          鼎升台球
          <!-- <img :src="gOrgImg"></img> -->
        </div>
        <el-menu :default-active="active" class="el-menu-vertical-demo" background-color="#F9F9F9" text-color="#8E8E8E" active-text-color="#24bbd3" ref="menu" router>
          <el-menu-item index="/user-list">
            <i></i>
            <span>用户列表</span>
          </el-menu-item>
          <el-menu-item index="/shop-list">
            <i></i>
            <span>门店列表</span>
          </el-menu-item>
          <el-menu-item index="/coach-list">
            <i></i>
            <span>私教列表</span>
          </el-menu-item>
          <el-menu-item index="/coachCourse">
            <i></i>
            <span>私教课列表</span>
          </el-menu-item>
          <el-menu-item index="/groupCourse">
            <i></i>
            <span slot="title">课程安排</span>
          </el-menu-item>
          <el-menu-item index="/banner">
            <i></i>
            <span slot="title">活动管理</span>
          </el-menu-item>
          <el-menu-item index="/integral">
            <i></i>
            <span slot="title">积分商城</span>
          </el-menu-item>
          <el-menu-item index="/purpose">
            <i></i>
            <span slot="title">合作意向</span>
          </el-menu-item>
          <el-menu-item index="/feedback">
            <i></i>
            <span slot="title">投诉反馈</span>
          </el-menu-item>

          <el-submenu index="system">
            <template slot="title">
              <i></i>
              <span>系统管理</span>
            </template>
           

            <el-menu-item index="/syslog">
              <i></i>
              <span>操作日志</span>
            </el-menu-item>
            
            <el-menu-item index="/loginlog">
              <i></i>
              <span>登录日志</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="updatePwdDialog" class="updatePwd-dialog">
      <div><!--  v-if="isAdmin" -->
        <label><span style="color: red">*</span>旧密码</label>
        <el-input v-model="updatePwdInfo.oldPwd"></el-input>
      </div>

      <div>
        <label><span style="color: red">*</span>新密码</label>
        <el-input v-model="updatePwdInfo.newPwd"></el-input>
      </div>

      <div>
        <label><span style="color: red">*</span>确认密码</label>
        <el-input v-model="updatePwdInfo.pwd"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePwdDialog = false">取 消</el-button>
        <el-button type="primary" @click="editPwd()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      active: '/user-list',
      settingList: ['account-list', '/doctor-schedule-config', '/course-schedule-config', 'course-type-list', '/syslog'],
      roleName: {
        admin: '管理员',
        doctor: '医生',
        therapist: '康复师',
        superManager: '超级管理员'
      },
      updatePwdInfo: {
        oldPwd: "",
        newPwd: "",
        pwd: "",
      },
      updatePwdDialog: false,
      isAdmin: true
    }
  },
  updated() {
    this.setActive()
  },
  mounted() {
    
    this.setActive()
  },
  methods: {

    updatePwd() {
      if (this.gRoleName === "admin") {
        this.isAdmin = false;
      }
      this.updatePwdDialog = true;
    },
    //修改密码
    editPwd() {
      this.$confirm("确认修改密码吗?", "修改密码确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
      });
    },
    //退出
    logout() {
      this.$store.commit("Logout");
      this.$router.replace({
        path: "/login"
      });
    },

    setActive() {
      if (this.$route.path.includes('/user-detail') || this.$route.path === '/new-user') {
        this.active = '/user-list'
      } else if (this.$route.path.includes('/shop-detail')) {
        this.active = '/shop-list'
      }  else if (this.$route.path.includes('/doctor-userbook')) {
        this.active = '/doctor-schedule'
      } else if (this.$route.path.includes('/course-schedule-detail')) {
        this.active = '/course-schedule'
      } else {
        this.active = this.$route.path
        this.settingList.includes(this.$route.path) && this.$refs.menu.open('system')
      }
    },

  }
}
</script>

<style lang="scss" scoped>

.updatePwd-dialog ::v-deep {
  .el-dialog {
    width: 30%;
    max-width: 368px;
    border-radius: 10px;
    overflow: hidden;
    .el-dialog__body {
      padding: 0 60px;
      > div {
        display: flex;
        margin-top: 30px;
        label {
          width: 120px;
          line-height: 44px;
          font-size: 18px;
        }
        .el-input__inner {
          height: 44px;
          width: 100%;
          font-size: 18px;
        }
        .el-select {
          width: 100%;
          margin: 0;
          font-size: 18px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      border-top: 1px solid #ededed;
      margin-top: 30px;
      padding: 30px 0;
      .el-button {
        width: 98px;
      }
    }
  }
}

p.tips {
  line-height: 1.2;
}

.home {
  .el-header::v-deep {
    height: 84px !important;
    padding: 0 40px 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .institution {
      font-size: 20px;
      font-weight: 400;
      color: #24bbd3;
    }

    .set-wrap {
      display: flex;
      align-items: center;
      .notifyBox {
        position: relative;
        cursor: pointer;

        .notice{
          display: block;
          width: 14px;
          height: 14px;
          position: absolute;
          top: 0;
          right: -4px;
        }
      }
      .el-button {
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
        color: #ffffff;
        border: none;
        background-color: #24bbd3;
      }

      .split-line {
        width: 4px;
        height: 35px;
        border-radius: 10px;
        margin: 0 32px;
        background: rgba(216, 216, 216, 0.4);
      }

      > img {
        width: 40px;
        height: 40px;
        cursor: pointer;
      }

      img + img,
      img + .el-button {
        margin-left: 24px;
      }
    }
  }

  /deep/ .el-aside {
    width: 304px !important;
    height: calc(100vh - 84px);
    position: relative;
    background-color: #f9f9f9;

    .el-menu {
      border: none;

      .el-menu-item,
      .el-submenu__title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        margin-bottom: 10px;
        padding-left: 68px !important;

        i:first-child {
          margin-right: 12px;
          display: inline-block;
          width: 12px;
          height: 12px;
          background-color: #8e8e8e;
          border-radius: 50%;
        }
      }

      .el-menu-item.is-active {
        background-color: rgba(36, 187, 211, 0.1) !important;

        i:first-child {
          background-color: #24bbd3 !important;
        }
      }

      .el-menu--inline .el-menu-item {
        padding-left: 92px !important;

        i {
          margin-right: 17px;
        }
      }
    }
  }

  /deep/ .el-main {
    height: calc(100vh - 84px);
    padding: 0;
    border: 8px solid #f5f5f5;
  }

  .logo {
    width: 214px;
    height: 92px;
    line-height: 92px;
    background: rgba(12, 154, 141, 0.4);
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    margin: 36px auto 26px;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>